<template>
  <div class="account-profile">
    <GimiSubTitle subTitle="个人资料" subDescription="管理您的个人信息和偏好设置" />
    <div class="content">
      <div class="profile-item">
        <div class="profile-item__title">
          <span>用户标识</span>
          <i class="ri-file-copy-line" @click="handleCopyUseruniquekey"></i>
        </div>
        <div class="profile-item__content">
          <div class="edit-value">
            <el-input :value="profile?.id" size="large" disabled></el-input>
          </div>
        </div>
      </div>
      <div class="profile-item">
        <div class="profile-item__title">
          <span>登录名</span>
          <el-popconfirm
            v-if="!profile?.username"
            class="box-item"
            width="240"
            title="当前账户还未设置密码，可能存在一定安全风险。请前往设置密码！"
            placement="top"
            :icon="WarnTriangleFilled"
            :hide-after="0"
            confirm-button-text="前往设置"
            cancel-button-text="我知道了"
          >
            <template #reference>
              <i class="ri-alert-fill"></i>
            </template>
          </el-popconfirm>
        </div>
        <div class="profile-item__content">
          <div class="edit-value">
            <el-input :value="profile?.username" size="large" disabled></el-input>
          </div>
        </div>
      </div>
      <div class="profile-item">
        <div class="profile-item__title">
          <span>姓名</span>
        </div>
        <div class="profile-item__content">
          <div class="edit-value">
            <el-input placeholder="请输入你的姓名" v-model="form.nickname" size="large"></el-input>
          </div>
        </div>
      </div>
      <div class="profile-item">
        <div class="profile-item__title">
          <span>个人简介</span>
        </div>
        <div class="profile-item__content">
          <div class="edit-value">
            <el-input
              type="textarea"
              v-model="form.intro"
              :maxlength="255"
              show-word-limit
              :autosize="{ minRows: 7, maxRows: 100 }"
              placeholder="请输入你的个人简介"></el-input>
          </div>
        </div>
      </div>
      <div class="submit-form">
        <el-button :disabled="!form.nickname" :loading="requestLoading" @click="handleUpdateProfile">更新个人资料</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'
import { WarnTriangleFilled } from '@element-plus/icons-vue'
import clipboard3 from 'vue-clipboard3'

import { apiUpdateUserProfile } from '@/apis/auth'
import { userStore } from '@/store/user.store'

const { profile } = storeToRefs(userStore())
const { toClipboard } = clipboard3()

const form = reactive({
  nickname: profile.value?.nickname,
  intro: profile.value?.intro
})

const requestLoading = ref(false)
const handleUpdateProfile = async () => {
  requestLoading.value = true
  try {
    await apiUpdateUserProfile(form)
    ElMessage.success('操作成功')
    userStore().queryUserProfile()
  } finally {
    requestLoading.value = false
  }
}

const handleCopyUseruniquekey = async () => {
  try {
    profile.value && await toClipboard(profile.value?.id)
    ElMessage.success('复制成功')
  } catch (e) {
    console.log(e)
  }
}
</script>

<style lang="scss" scoped>
.content {
  .profile-item {
    margin-bottom: 20px;
    .profile-item__title {
      padding-bottom: 12px;
      color: #000;
      font-size: 14px;
      display: flex;
      align-items: center;
      .ri-alert-fill {
        font-size: 16px;
        margin-left: 6px;
        color: #ffd124;
        cursor: pointer;
      }
      .ri-file-copy-line {
        font-size: 15px;
        color: #71717a;
        margin-left: 6px;
        cursor: pointer;
      }
    }
    .profile-item__content {
      .el-input {
        font-size: 14px;
        color: #333;
      }
    }
  }
  .submit-form {
    margin-top: 36px;
  }
}
</style>
